
<div class="container-fluid" id="booksOfType">

  <div class="container col-md-12" v-if="pageData.total<1">
    <h3 style="text-align: center">暂无 {{bookType.name}} 类图书</h3>
  </div>

  <div class="container"  v-if="pageData.total>0" >

    <!--分类提示-->
    <div class="row">
      <div class="col-md-12">
        <p style="background-color: cornflowerblue ; color: white; font-size: 30px"> {{bookType.name}} 类图书</p>
      </div>
    </div>

    <!--分页数据-->
    <div class="row">
      <div class="col-sm-6 col-md-4" v-for="book in pageData.records" >
        <div class="thumbnail">
          <img :src="book.imgsrc" alt="..." class="col-sm-6 col-md-6" style="width: 140px;height: 130px">
          <div class="caption text-left">
            <p>书名:<span v-text="book.name" >name</span></p>
            <p>价格:<span v-text="book.price" >price</span></p>
            <p>热销量:<span v-text="book.buycount" >buycount</span></p>
            <p>
              <a class="btn btn-primary" @click.prevent="seeBookDetailOf(book.id)" >详情</a> &nbsp;&nbsp;&nbsp;&nbsp;
              <a class="btn btn-success" >加入购物车</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--分页页码-->
    <div class="row">
      <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5" >
        <ul class="pagination justify-content-center">
          <li><a href="" @click.prevent="goPage(pageData.current-1)" >上一页</a></li>
          <li><a href="" v-for="n in pageData.pages" v-text="n"  @click.prevent="goPage(n)" >n</a></li>
          <li><a href="" @click.prevent="goPage(pageData.current+1)" >下一页</a></li>
        </ul>
      </div>
    </div>

  </div>

</div>
